<template>
    <div class="guide">
       <!-- <van-swipe v-if="false" class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(l,i) in imgs" :key='i'>
            <van-image :src="l" class="gimg"></van-image>
            <van-button type="primary" class="gbtn" v-if="i==imgs.length-1" @click="gotowhere({name:'main'})">千锋影院</van-button>
        </van-swipe-item> -->
       


        <!-- <van-swipe  v-if="false" class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(l,i) in banner" :key='i'>
            <van-image :src="l.imageUrl" class="gimg"></van-image>
            <van-button type="primary" class="gbtn" v-if="i==banner.length-1" @click="gotowhere({name:'main'})">千锋影院</van-button>
        </van-swipe-item>
 </van-swipe> -->

 <!-- <my-swiper  class="my-swipe"  :options="options" id="onebox"> 
               <div class="swiper-slide" v-for="(l,i) in imgs" :key='i'>
                 <van-image :src="l" class="gimg"></van-image>
                 <van-button type="primary" class="gbtn" v-if="i==imgs.length-1"  @click="gotoWhere({name:'main'})"> 千锋影院</van-button>
            </div>

             <my-swiper-item v-for="(l,i) in imgs" :key='i'>
                 <van-image :src="l" class="gimg"></van-image>
                 <van-button type="primary" class="gbtn" v-if="i==imgs.length-1"  @click="gotoWhere({name:'main'})"> 千锋影院</van-button>
            </my-swiper-item>
            </my-swiper> -->


             <my-swiper  v-if="true" class="my-swipe" :options="options" id="onebox" >
            <my-swiper-item v-for="(l,i) in banner" :key='i'>
                 <van-image :src="l.imageUrl" class="gimg"></van-image>
                 <van-button type="primary" class="gbtn" v-if="i==banner.length-1"  @click="gotoWhere({name:'main'})"> 千锋影院</van-button>
            </my-swiper-item>
        </my-swiper>

<div class="dao" @click="gotoWhere({name:'main'})" >
            <van-circle  v-model="currentRate"  color="#f50" size="200px" :stroke-width="60" :rate="100" :speed="20" :text="text" />
        </div>


    </div>
</template>




<script>
export default {
    name:"guide",
    data(){
        return {
            currentRate:0,
            imgs:[
                require("@/assets/images/img1.jpg"),
                require("@/assets/images/img2.jpg"),
                require("@/assets/images/img3.jpg"),
                require("@/assets/images/img4.jpg"),
            ],
            banner:[],
            options:{
                observer:true, // 检测swiper 页码改变会去重新实例化Swiper
                autoplay: {
                    delay: 1000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                },
                speed:1000,
                effect : 'cube',
                cubeEffect: {
                    slideShadows: true,
                    shadow: true,
                    shadowOffset: 100,
                    shadowScale: 0.6
                },
            }
        }
    },
    computed:{
        text(){
            return  (5-Math.floor(this.currentRate/20)) + " S"
        }
    },
    watch:{
        currentRate(v){
            if(v==100){
                this.gotoWhere({name:'main'})
            }
        }
    },
    // created(){
    //     var now_month = new Date().getMonth()+1;
    //     // var now_month = 3
    //     // console.log(now_month)
    //     // 如果月份一样  就只需要比较3次  
    //     // 月份不一样  清除 
    //     if(now_month==localStorage.getItem('new_appMonth')){
    //         localStorage.appcount++;
    //         if(localStorage.appcount>3){
    //             this.gotoWhere({name:'main'})
    //         }
    //     }else{
    //         var month = new Date().getMonth()+1;
    //         localStorage.setItem("new_appMonth",month)
    //         localStorage.setItem('appcount',1)
    //     }

     
    // },
    mounted(){
        // 异步数据影响 
        this.$axios.get("http://47.104.209.44:3333/banner")
        .then(res=>{
            console.log(res)
            this.banner = res.data.banners.slice(0,4)
        })

        // localStorage
    }
}
</script>
<style lang="less" scoped>
.gbox{
    width: 300px; 
    height: 300px;
    background: rebeccapurple;
}
.guide{
    width:100%;
    height:100%;
    .dao{
        position: absolute;
        top:20px;
        right:20px;
        z-index:1000;
        ::v-deep .van-circle__text{
        color:#f50 !important;
        font-weight: bold;
    }
  }
    .my-swipe{
        width:100%;
        height:100%;
        position: relative;
        .gimg{
            width:100%;
            height:100%;
        }
        .gbtn{
            position: absolute;
            left:50%;
            transform: translateX(-50%);
            bottom:50px;
            // z-index: 1000;
        }
    }
}
</style>